<template>
  <div class="module-box" :style="`width:${width}px; overflow: auto; overflow-x:hidden; max-height: 320px;`">
    <ul>
      <li v-for="m in menusFilterData" :key="m.id" @click="clickHandle(m)" :style="`background-color:${m.bgColor}`">
        <span>
          <i style="margin-top:15px;font-size: 28px;">
            <svg class="icon-svg " aria-hidden="true">
              <use :xlink:href="`#${m.icon}`"></use>
            </svg>
          </i>
          <span style="margin-top:10px" class="icon-name">{{m.name}}</span></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    // 菜单参数
    data: {
      type: Array,
      default () {
        return []
      }
    },
    // 列宽，默认按照行数进行计算
    windowWidth: {
      type: Number,
      default () {
        return 0
      }
    },
    // 行数，默认按照菜单数量进行计算
    listLine: {
      type: Number,
      default () {
        return 0
      }
    }
  },
  data () {
    return {
      width: 540
    }
  },
  computed: {
    // 计算菜单
    menusFilterData: function () {
      // 菜单转换
      let tempMenus = []
      // 遍历所有菜单
      this.data.forEach(item => {
        // 处理菜单数据
        if (item.showFlag) {
          tempMenus = tempMenus.concat(item)
        }
      })
      return tempMenus
    }
  },
  created () {
    if (!this.windowWidth) {
      let size = this.menusFilterData.length
      // if (size === 1) {
      //   size = 1
      // } else

      if (size <= 4) {
        size = 2
      } else if (size <= 6) {
        size = 3
      } else if (size <= 8) {
        size = 4
      } else {
        size = 5
      }
      // console.log(1)
      // 计算宽度
      if (this.menusFilterData.length <= 15) {
        this.width = size * 110 - 10
      } else {
        this.width = size * 110
      }
    } else {
      this.width = this.windowWidth
    }
    // console.log('1')
  },
  methods: {
    clickHandle (menu) {
      this.$emit('click', menu)
    }
  }

}
</script>

<style lang="scss" >
.module-box {
  /* background: #e4f7fd61; */
  /* border: 2px solid #0786ada1; */
  border-radius: 8px;
}
.module-box ul {
  padding: 0;
}
.module-box li {
  list-style: none;
  text-align: center;
  cursor: pointer;
  /* line-height: 100px; */
  /* background: rgba(146, 203, 230, 0.65); */
  background-color: #797575;
  border-radius: 8px;
}
.module-box li:hover {
  opacity: 0.8;
  filter: Alpha(opacity=80); /* IE8 以及更早的浏览器 */
  /* background-color: #eb680aa9; */
}
.module-box {
  width: 940px;
}
.module-box ul {
  overflow: hidden;
  margin-right: -10px;
  margin-bottom: -10px;
  margin-top: 0;
}
.module-box li {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.module-box li i {
  display: block;
  font-size: 32px;
  /* margin-bottom: 15px; */
  color: #fff;
  transition: color 0.15s linear;
}
.module-box li .icon-name {
  display: inline-block;
  padding: 0 5px;
  height: 1em;
  line-height: normal;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  color: #fff;
  font-size: 12px;
  transition: color 0.15s linear;
}

.module-box {
  overflow: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 0px;
    height: 7px;
    background-color: transparent;
  }
  /*定义滚动条轨道
      内阴影+圆角*/
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #f5f5f5;
  }
  /*定义滑块
      内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.02);
  }
  &:hover {
    &::-webkit-scrollbar {
      width: 7px;
    }
    &::-webkit-scrollbar-track {
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      background-color: #f5f5f5;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      background-color: #9d9fa1;
    }
  }
  /* max-height: 250px; */
  /* max-height: calc(
    calc(calc(100vh - 50px - 38px - 20px) - 2px) - 45px - 52px - 28px - 25px -
      100px
  ); */
}
</style>
